<template>
    <div class="chart-wrap" style="height:100%;">
        <a-row :gutter="[15,0]" style="height:100%;">
            <a-col :span="12" style="height:50%;" v-for="item in currentList" :key="item.id">
                <div class="item">
                    <div class="attr">
                        {{ item.name }}
                        <span v-if="item.status===1" class="state">
                            <span class="dot green"></span>正常
                        </span>
                        <span v-else class="state">
                            <span class="dot red"></span>异常
                        </span>
                    </div>
                    <div class="pic" @click="playVideo(item.vedioUrl)">
                        <img :src="item.img" alt="">
                    </div>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { computed, defineComponent,ref, watch } from 'vue';
import img1 from '../../assets/video1.jpg';
import img2 from '../../assets/video2.jpg';
import img3 from '../../assets/video3.jpg';
import img4 from '../../assets/video4.jpg';
export default defineComponent({
    props:['currentPage','videoUrlIndex'],
    setup(props,{emit}) {
        const list = ref([
            {id:1,name:'摄像头01',status:1,img:img1,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头02',status:1,img:img2,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头03',status:0,img:img3,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头04',status:1,img:img4,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头02',status:1,img:img2,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头03',status:0,img:img3,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头04',status:1,img:img4,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头01',status:1,img:img1,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头02',status:1,img:img2,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头03',status:0,img:img3,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头04',status:1,img:img4,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头01',status:1,img:img1,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头02',status:1,img:img2,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头03',status:0,img:img3,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头04',status:1,img:img4,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头01',status:1,img:img1,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头02',status:1,img:img2,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头03',status:0,img:img3,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头01',status:1,img:img1,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"},
            {id:1,name:'摄像头04',status:1,img:img4,vedioUrl:"rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"}
        ]);

        const playVideo = (url)=>{
            emit('playVideo',url)
        }

        const currentList = computed(()=>{
            let start = (props.currentPage - 1)*4;
            let arr = [];
            for(let i=start;i<start+4;i++) {
                if(list.value[i]) {
                    arr.push(list.value[i])
                }
            }
            return arr;
        });

        watch(()=>props.videoUrlIndex,(value)=>{
            if(list.value[value]) {
                emit('changeVideo',{url:list.value[value].vedioUrl,index:value})
            } else {
                let index = list.value.length-1;
                emit('changeVideo',{url:list.value[index].vedioUrl,index:index})
            }
        })

        return {
            list,
            playVideo,
            currentList
        }
    }
});
</script>

<style lang="scss" scoped>
.item {
    height:100%;
    .attr {
        height:30px;
        line-height:30px;
        .state {
            float:right;
            .dot {
                height:10px;
                width:10px;
                border-radius: 5px;
                display: block;
                float:left;
                margin:10px 5px;
            }
            .green {
                background:#00e473;
            }
            .red {
                background:red;
            }
        }
    }
    .pic {
        height:calc(100% - 30px);
        background:rgba(0,0,0,0.3);
        cursor: pointer;
        img {
            width:100%;
            height:100%;
        }
    }
}
</style>